<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="wrap">
        <ul class="list">
            1231123
            <li>01</li>
            <li>02</li>asdasds
            <li class="mid">03</li>
            <li>04</li>
            <li class="five">05</li>
            <!-- <li>06</li> -->
        </ul>
    </div>

</body>
<script>
    // 文档 => 文档节点document
    // html元素  => 元素节点
    // 属性      => 属性节点
    // 文本      => 文本节点
    // 注释      => 注释节点

    // 节点的层级关系
    // 父节点
    // 子节点
    // 同胞节点


    var list = document.getElementsByClassName("list")[0];
    var mid = document.getElementsByClassName("mid")[0];

    // 父节点/父元素    
    // Element.parentNode      父节点
    // Element.parentElement   父元素

    // console.log(list.parentNode);
    // console.log(list.parentElement);

    // var html = document.documentElement;
    // console.log(html.parentNode);  // document
    // console.log(html.parentElement); // null


    // 子节点/子元素
    // parentEle.childNodes   子节点
    // parentEle.children     子元素
    console.log(list.childNodes);
    console.log(list.children);

    // console.log(list.childNodes[0]);
    // console.log(list.childNodes[11]);


    // 第一个  子节点/子元素
    // Element.firstChild
    // Element.firstElementChild
    // console.log(list.firstChild);
    // console.log(list.firstElementChild);


    // 最后一个  子节点/子元素
    // Element.lastChild
    // Element.lastElementChild
    // console.log(list.lastChild);
    // console.log(list.lastElementChild);

    // 同胞节点 / 同级元素
    // 前一个   节点 / 元素
    // Element.previousSibling
    // Element.previousElementSibling
    // console.log(mid.previousSibling);
    // console.log(mid.previousElementSibling);

    // 后一个   节点 / 元素

    // Element.previousSibling
    // Element.previousElementSibling
    // console.log(mid.nextSibling);
    // console.log(mid.nextElementSibling);



    // 链式写法  如果查找的结果仍然是一个节点(元素) 还可以继续查找
    console.log(mid.parentElement.parentElement);
    console.log(mid.nextElementSibling.nextElementSibling);



</script>

</html>